<template>
  <div class="Share">
    <div class="ShareHead"></div>
    <div class="ShareFrom">
      <div class="ShareFromList">
        <div class="ShareFromListName">手机号</div>
        <input type="text" v-model="Phone" />
      </div>
      <div class="ShareFromList">
        <div class="ShareFromListName">密码</div>
        <input type="password" v-model="Password" />
      </div>
      <div class="ShareFromList">
        <div class="ShareFromListName">确定密码</div>
        <input type="password" v-model="Newpassword" />
      </div>
      <div class="ShareFromList">
        <div class="ShareFromListName">验证码</div>
        <div class="ShareFromListYan">
          <input type="text" v-model="Code" />
          <div class="ShareFromListButton" @click="ShareFromListButton($event)" v-animated>发送验证码</div>
        </div>
      </div>
      <div class="ShareFromList">
        <div class="ShareFromListName">邀请码</div>
        <input type="text" v-model="Invitation" disabled />
      </div>
    </div>
    <div class="entry" @click="Registed" v-animated>
      注册
    </div>
  </div>
  <transition name="fade">
    <div v-show="showTip" class="level-tip">
      {{ texts }}
    </div>
  </transition>
  <Home v-show="HomeHide" @HomeClose="HomeClose"></Home>
</template>
<script setup>
import { onBeforeMount, onMounted, ref } from 'vue';
import { MobileCode, Register } from '@/api/article'
import Home from './components/Home.vue'
let time = 60
let Phone = ref()
let Password = ref()
let Newpassword = ref()
let Code = ref()
let texts = ref('')
let Invitation = ref('')
let showTip = ref(false)


let HomeHide=ref(false)
const HomeClose=(item)=>{
  HomeHide.value=item
}

const ShareFromListButton = (event) => {
  if (time == 60) {
    MobileCode({ 'mobile': Phone.value, 'type': 1 }).then(item => {
      console.log(item)
      if (item.data.code != 0) {
        texts.value = item.data.msg
        showTip.value = true
        setTimeout(() => {
          showTip.value = false
        }, 1500)
      } else {
        let all = setInterval(() => {
          event.target.innerText = time + 's'
          time--
          if (time <= 0) {
            time = 60
            clearInterval(all)
            event.target.innerText = '发送验证码'
          }
        }, 1000)
      }
    })
  }
}
onMounted(() => {
  let a = window.location.search.split('?')
  if (a.length > 1 ){
    Invitation.value = a[1]
  }
})
const Registed = () => {
  Register({ 'mobile': Phone.value, 'code': Code.value, 'password': Password.value, 'confirmPassword': Newpassword.value, 'inviteCode':Invitation.value}).then(item => {
    if (item.data.code != 0) {
      texts.value = item.data.msg
      showTip.value = true
      setTimeout(() => {
        showTip.value = false
      }, 1500)
    }else{
      HomeHide.value=true
    }
  })
}

</script>

<style lang="scss">
.level-tip {
  width: 40rem;
  height: 4.5rem;
  text-align: center;
  line-height: 4.5rem;
  background: url('./assets/di_mingzi.png') no-repeat;
  background-position: center;
  background-size: 100% 100%;
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3rem;
  font-family: Adobe Heiti Std;
  font-weight: bold;
  color: #FFFFFF;
  z-index: 300;
}

* {
  padding: 0px;
  margin: 0px;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  // -webkit-font-smoothing: antialiased;
  // -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  color: #2c3e50;
}

.Share {
  width: 100%;
  height: 100vh;
  background: url('./assets/分享页面/圆角矩形\ 1\ 拷贝.png') no-repeat;
  background-size: cover;
  background-position: center;

  .entry {
    width: 25rem;
    height: 8.1rem;
    background: url('./assets/分享页面/图层 4.png') no-repeat;
    background-size: cover;
    position: absolute;
    bottom: 25rem;
    left: 0;
    right: 0;
    margin: auto;
    line-height: 8rem;
    text-align: center;
    font-size: 3rem;
    color: #744d2c;
  }

  .ShareHead {
    width: 36.5rem;
    height: 26.9rem;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 26rem);
    background: url('./assets/分享页面/图层\ 3.png') no-repeat;
    background-size: cover;
  }

  .ShareFrom {
    height: 70rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    padding: 5rem 8.6rem 0rem 11rem;

    .ShareFromList {
      margin-top: 2.3rem;

      .ShareFromListName {
        font-size: 3.5rem;
        color: white;
        font-weight: bold;
        // -webkit-text-stroke: 1.5px #353535;
        text-shadow: 2px 2px 2px #353535;
      }

      input {
        background: rgba(0, 0, 0, 0.4);
        height: 5.1rem;
        width: 100%;
        border: 1px solid #79858f;
        color: aliceblue;
        font-weight: 400;
        font-size: 3rem;
        padding-left: 1rem;
      }
    }

    .ShareFromListYan {
      display: flex;
      justify-content: space-between;
      align-items: center;

      input {
        width: 31rem;
      }

      .ShareFromListButton {
        width: 18.8rem;
        height: 7.8rem;
        line-height: 7.8rem;
        text-align: center;
        font-size: 3rem;
        color: #744d2c;
        background: url('./assets/分享页面/图层 2.png') no-repeat;
        background-size: cover;
      }
    }
  }
}
</style>
